<template>
    <div class="mr-10 ml-10">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first"></el-tab-pane>
      </el-tabs>
    </div>
  
    <div class="mr-10 ml-10 mb-20">
      <el-form
        ref="params"
        :model="params"
        :rules="paramsRules"
        label-width="100px"
        v-loading="loading"
      >
        <div v-show="activeIndex == 0">
    
          <el-form-item label="昵称" prop="nickName">
            <el-input v-model="params.nickName"></el-input>
          </el-form-item>
  
          <el-form-item label="代理">
            <el-radio v-model="params.role" label="0">否</el-radio>
            <el-radio v-model="params.role" label="1">是</el-radio>
        
          </el-form-item>
          <el-form-item label="头像">
            <el-image style="width: 100px; height: 100px" :src="params.avater"  />
            <el-upload
              action="/api/upload"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-success="upload"
              :show-file-list="true"
            >
             
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
  
          <el-form-item label="状态">
            <el-radio v-model="params.status" label="0">禁用</el-radio>
            <el-radio v-model="params.status" label="1">启用</el-radio>
          </el-form-item>
  
          <!-- <el-form-item label="钻石">
            <el-input v-model="params.diamond"></el-input>
          </el-form-item>
          <el-form-item label="金币">
            <el-input v-model="params.money"></el-input>
          </el-form-item> -->
        </div>
          <el-form-item label="邀请码" prop="inviteCode">
            <el-input v-model="params.inviteCode"></el-input>
          </el-form-item>

          <el-form-item label="上级ID">
            <el-input v-model="params.parentId"></el-input>
          </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit('params')">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  <script>
  import { detail,update } from "../../../../api/member.js";

  import Vue3Tinymce from "@jsdawn/vue3-tinymce";
  import { Plus } from "@element-plus/icons-vue";
  import {
    getImgUrlFromStr,
    filterHtml,
    filterBody,
    addLabelValue,
    treeById,
    tree,
  } from "../../../../utils/tools.js";
  
  export default {
    name: "memberEdit",
    components: {
      Vue3Tinymce,
      Plus,
    },
    data: () => {
      return {
        loading: true,
        categorySelected: [], //-1默认选中顶级栏目
        categoryProps: { checkStrictly: true },
        activeName: "first", //tab 默认显示第一个
        activeIndex: "0", //tab 内容默认显示第一个
        category: [], //当前所有栏目
        cateList: [], //所有栏目
        autoImg: true,
        autoDes: true,
        picNum: 1,
        taglist: [],
        params: {
          //接口入参
          id: 0,
          diamond: 0,
          money: 0,
          status: 0,
          avater: "",
          role: 0,
          sex: [],
          nickName: "",
          inviteCode: "",
          parentId: "",
        },
        field: [], //字段列表
        fieldParams: {},
        dialogImageUrl: "",
        dialogVisible: false,
        disabled: false,
        paramsRules: {
          //校验规则
          nickName: [
            { required: true, message: "请输入名称", trigger: "blur" }
          ],
        },
        cur: 1,
        keywords: "",
      };
    },
    computed: {},
    async mounted() {},
    async created() {
      this.params.id = this.$route.params.id;
      await this.detail(); // 文章详情
      await this.query(); //查询栏目
      //this.searchTag();
    },
    unmounted() {},
    methods: {
      handleClick(tab) {
        this.activeIndex = tab.index;
      },
      setContent(article) {
        this.params.content = article;
      },
  
      //查询标签
      async searchTag(keywords) {
        try {
          let res = await search(this.cur, keywords, 100);
          if (res.code === 200) {
            let arr = [];
            res.data.list.forEach((item) => {
              arr.push({
                label: item.name,
                value: item.id,
              });
            });
  
            this.taglist = arr;
          }
        } catch (error) {
          console.log(error);
        }
      },
  
      //查询栏目
      async query() {
        try {
          let res = await find();
          if (res.code === 200) {
            let data = res.data;
            let ids = treeById(this.params.cid, data);
            this.categorySelected = ids;
            // this.findField(this.categorySelected);
            this.findField(this.params.cid);
            let end = addLabelValue(tree(data));
            this.cateList = addLabelValue(data);
            this.category = [...end];
          }
        } catch (error) {
          console.log(error);
        }
      },
  
      //选择栏目
      handleChange(e) {
        if (e[0] != -1) {
          this.params.cid = e[e.length - 1];
          this.findField(this.params.cid);
        } else {
          this.field = [];
        }
      },
      //查询
      async findField(cid) {
        try {
          let res = await findField(cid);
          if (res.code === 200) {
            this.field = res.data.fields;
          }
        } catch (error) {
          console.log(error);
        }
      },
  
      // 文章详情
      async detail() {
        try {
          let res = await detail(this.params.id);
          if (res.code === 200) {
            let params = res.data;
            params.status = params.status.toString();
            params.role = params.role.toString();
            this.params = params;
            this.fieldParams = params.field;
            this.loading = false;
          }
        } catch (error) {
          console.error(error);
        }
      },
  
      handleAttr(e) {
        console.log("e-->", e);
      },
  
      handleSubCid(e) {
        console.log("e-->", e);
      },
  
      beforeUpload(rawFile) {
        if (rawFile.size / 1024 / 1024 > 2) {
          this.$message("上传文件必须小于1M");
          return false;
        }
      },
      //上传缩略图
      upload(res) {
        if (res.code === 200) {
          this.params.avater = res.data.path;
        }
      },
  
      //新增
      async update() {
        try {
          let params = { ...this.params };
          debugger;
          //判断是否有缩略图
          // if (!params.avater) {
          //   params.avater = getImgUrlFromStr(params.avater);
          // }
          let res = await update({ ...params, field: this.fieldParams });
          if (res.code) {
            this.$message({
              message: "更新成功^_^",
              type: "success",
            });
            this.$router.go(-1);
          }
        } catch (error) {
          console.log(error);
        }
      },
  
      submit(formName) {
        debugger;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.update();
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
    },
  };
  </script>
  <style></style>
  